<template>
    <div class="container">
        <div class="d-flex align-items-baseline pt-4">
            <img style="width:32px" class="rounded" src="/src/assets/images/logo.svg" alt="">
            <div class="h1 fw-bold ms-2">Pinia</div>
        </div>
        <div class="mt-2 text-black-50 ">
            Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与
            TypeScript 一起使用时具有可靠的类型推断支持。Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。最终，我们意识到 Pinia 已经实现了我们在
            Vuex 5 中想要的大部分内容，并决定实现它 取而代之的是新的建议。您可以访问
            <a class="text-info" href="https://pinia.web3doc.top/introduction.html" target="_blank">官网文档</a>
            查看详情。本站内容简单记录其安装和使用过程。<br>
            案例由"vite": "^2.9.15","pinia": "^2.0.14","vue": "^3.2.25"使用,如果使用过Vuex,您将很快掌握下面内容。
            <div class="text-primary mt-2  border-bottom">更新时间：2022/10/7</div>
        </div>
        <div class="row">
            <div class="h5 mt-4">
                基本使用体验
            </div>
            <div class="d-flex align-items-center justify-content-start">
                <div class="text-bg-light  p-4 w-100  ">
                    <span class="text-success">State:</span>{{ piniaState || '未获取State' }}
                    <div><span class="text-success">Name：</span>{{ piniaState ? piniaState.name : '未获取State' }}</div>
                    <div><span class="text-success">Number：</span>{{ piniaState ? piniaState.Number : '未获取State' }}
                    </div>
                    <div><span class="text-success">计算属性halfNumber：</span>{{
                            piniaState ? piniaState.halfNumber : '未获取State'
                    }}
                    </div>
                    <div><span class="text-success">
                            计算属性doubleNumber：</span>{{ piniaState ? piniaState.doubleNumber : '未获取State' }}</div>
                    <div class="mt-2 d-flex">
                        <button class="btn btn-dark text-white btn-sm m-1" @click="getState">获取State</button>
                        <button class="btn btn-dark text-white btn-sm  m-1" @click="changeName">改变Name</button>
                        <button class="btn btn-dark text-white btn-sm  m-1" @click="changeNumber">改变Number</button>
                        <button class="btn btn-dark text-white btn-sm  m-1" @click="moreState">改变多个属性</button>
                    </div>
                </div>
            </div>

        </div>
        <div class="col">
            <div class="h5 mt-4">
                安装
            </div>
            <highlightjs language='bash' code="使用yarn yarn add pinia 
使用npm npm install pinia " />
        </div>
        <div class="col">
            <div class="h5 mt-4">
                在文件入口main.ts中引入
            </div>
            <highlightjs language='js' code='import { createPinia } from "pinia"
app.use(createPinia()).mount("#app");' />
        </div>
        <div class="row">
            <div class="h5 mt-4">
                在Src目录下创建一个文件夹stores，新建Index.ts文件，文件内容如下
            </div>
            <highlightjs language='javascript' code="import { defineStore } from 'pinia'//引入pinia
// 导出useStore，定义一个store,defineStore('main',{}),第一个参数是应用程序中 store 的唯一 id，第二个参数就是类似Vuex的一些属性。
export const useStore = defineStore('main', {
    // 存放状态的属性
    state: () => {
        return {
            // 所有这些属性都将自动推断其类型
            Number: 1,
            name: 'wenjinxiang的日志',
        }
    },
    // 计算属性,类似VueX,vue的计算属性
    getters: {
        // 自动将返回类型推断为数字
        halfNumber(state) {
            return state.Number / 2
        },
        // 返回类型必须明确设置
        doubleNumber(): number {
            return this.Number * 2
        },
    },
    //actions 改变state的方法定义
    actions: {
        add() {
            this.Number++
        },
        changeName() {
        this.name = ` 您更改了我的名字！！！，时间为：${new Date()}`
        }
    },
})" />
        </div>
        <div class="col">
            <div class="h5 mt-4">
                在Vue模板中中使用
            </div>
            <highlightjs language='js' code='//导入
import { useStore } from "../../../store/index" //引入上面创建的ts文件导出的方法
import { storeToRefs } from "pinia" //为了保证响应式，需要导入相关方法结构
const store = useStore()
// state 的使用
//导入后可以直接在模板或者js代码中使用
<div>{{store}}</div> // { "$id": "main", "Number": 35, "name": "你改变了我的名字啦！！！", "halfNumber": 17.5, "doubleNumber": 70, "_isOptionsAPI": true }
解构!这里不能够直接解构，不然会失去响应式，需要调用storeToRefs
const { name, Number } = storeToRefs(store)
store.add() // js直接执行actions的方法
store.Number++ // 直接读写state的内容
store.$patch({ // 批量修改state内容
    Number: store.Number + 1,
    name: "wjx的网络日志",
})
store.$state = { counter: 666, name: "Paimon" } //直接换掉state状态
cartStore.$subscribe(fn) //订阅状态 ，查看状态和变化
//计算属性的使用 
<div>{{store.halfNumber}}</div>//还可以传递参数，具体看文档，简单记录一下。
store.halfNumber} //js中直接访问
// Actions的使用 相当于组件中的 methods。
store.add()
store.changeName()
store.$onAction() 订阅 action 及其结果 具体内容看文档
' />
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from "~src/store/index"
import { storeToRefs } from 'pinia'
const store = useStore()
/**
* 数据部分
*/
let piniaState = ref()
// 方法部分
const getState = () => {
    piniaState.value = store
}
const changeNumber = () => {
    store.add()
}
const changeName = () => {
    store.changeName()
}
const moreState = () => {
    store.$patch({
        Number: store.Number + 1,
        name: '更改了多个属性啦！',
    })
}
</script>
<style scoped lang='less'>

</style>